import GenernalFormItem from '@/components/GenernalFormItem/index';
import { useRequest } from 'ahooks';
import { fetchUserCateInfo } from '@/service/personnelEntry';
import { injectEnumByKey } from '@/utils/form/injectCatelog';
import ProForm, { FormInstance } from '@ant-design/pro-form';
import { transformToSubmitData } from '@/pages/personnelEntry/components/AddPerson/index';
import { personColumnsList } from '@/pages/personnelEntry/components/ModifyPerson/index';
import { Button } from 'antd';

interface UserInfoProps {
    onFinish: (values: any) => Promise<void>;
    form: FormInstance;
}

const rawColumns = personColumnsList.map((item) => {
    if (item.key === 'age') {
        return {
            ...item,
            hideInSearch: true,
        };
    }
    return item;
});

export default function UserInfo(props: UserInfoProps) {
    const [form] = ProForm.useForm(props.form);
    const { loading: loadingByCateInfo, data: cateInfo } = useRequest(
        async () => {
            const res = await fetchUserCateInfo();

            if (res.code !== 200) {
                console.error(res.msg || '服务器出现错误');
                return;
            }
            return res.data;
        },
        { manual: false },
    );

    const columns = injectEnumByKey(rawColumns, cateInfo, [
        ['corps_id', 'corps'],
        ['army_id', 'army'],
        'no_type',
        'serve_status',
    ]);

    return (
        <div>
            <GenernalFormItem
                form={form}
                formProps={{
                    onFinish: async () => {
                        props.onFinish(
                            transformToSubmitData([
                                form.getFieldsValue(true),
                            ])[0],
                        );
                    },
                    submitter: false,
                }}
                columns={columns}
            />
            <div>
                <Button
                    type="primary"
                    style={{ width: '100px' }}
                    onClick={() => {
                        form.submit();
                    }}
                >
                    提交
                </Button>
                <Button
                    style={{ marginLeft: 20, width: '100px' }}
                    onClick={() => {
                        form.resetFields([
                            'username',
                            'sex',
                            'serve_status',
                            'army_id',
                            'corps_id',
                            'no_type',
                            'no',
                            'address',
                        ]);
                    }}
                >
                    重置
                </Button>
            </div>
        </div>
    );
}
